<template>
  <view>
    <image
      class="chat-image"
      mode="widthFix"
      @click="imageClick"
      :src="data.content"
    ></image>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    urls: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    imageClick() {
      uni.previewImage({
        // indicator: 'none',
        current: this.getIdx(),
        urls: this.urls.length ? this.urls : [this.data.content],
      });
    },
    getIdx() {
      return this.urls.findIndex((url) => url === this.data.content) || 0;
    },
  },
};
</script>

<style lang="scss">
.chat-image {
  // max-height: 240px;
  max-width: 400upx;
  border-radius: 16upx;
  overflow: hidden;
}
</style>
